<template>
    <div class="main-container">
        <SildeBar></SildeBar>
        <div class="main-right-container" :class="isCollapse?'hide':''">
            <NavBar></NavBar>
            <TagBar></TagBar>
            <transition name="el-fade-in-linear">
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import SildeBar from "@/components/SideBar/SildeBar.vue";
import NavBar from "@/components/NavBar/NavBar.vue";
import TagBar from "@/components/TagBar/TagBar.vue";

export default {
    components: {
        SildeBar,
        NavBar,
        TagBar,
    },
    computed: {
        ...mapState(["isCollapse"]),
    },
};
</script>

<style scoped>
.main-container {
    height: 100%;
    width: 100%;
    min-width: 500px;
    position: relative;
}
.main-right-container {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 200px;
    transition: all 0.28s ease-in-out;
    min-height: 100%;
}
.main-right-container.hide {
    margin-left: 65px;
}
</style>